<template>
  <div class="flex" :class="isUser ? 'justify-end' : 'justify-start'">
    <div 
      class="max-w-xs lg:max-w-md rounded-lg p-4"
      :class="bubbleClasses"
    >
      <p class="text-sm whitespace-pre-wrap">{{ message }}</p>
      <div class="flex items-center justify-between mt-2">
        <span class="text-xs opacity-70">{{ formatTime(timestamp) }}</span>
        <div class="flex items-center gap-1">
          <button
            v-if="!isUser"
            @click="copyMessage"
            class="text-xs opacity-50 hover:opacity-100 transition-opacity"
            title="复制消息"
          >
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { formatTime } from '../utils'

export default {
  name: 'MessageBubble',
  props: {
    message: {
      type: String,
      required: true
    },
    timestamp: {
      type: String,
      required: true
    },
    isUser: {
      type: Boolean,
      default: false
    }
  },
  emits: ['copy'],
  setup(props, { emit }) {
    const bubbleClasses = computed(() => {
      return props.isUser 
        ? 'bg-primary-600 text-white' 
        : 'bg-gray-100 text-gray-800'
    })

    const copyMessage = async () => {
      try {
        await navigator.clipboard.writeText(props.message)
        emit('copy', props.message)
      } catch (error) {
        console.error('Failed to copy message:', error)
      }
    }

    return {
      bubbleClasses,
      copyMessage,
      formatTime
    }
  }
}
</script> 